<template>
  <div class="phoneLogin">
        <div class="head">
            <div @click="$router.go(-1)">
                <img src="../../assets/images/fanhui.png" alt="">
            </div>
            <span>手机号登录</span>
        </div>
        <p>未注册手机号登录后将自动创建账号</p>
        <div class="username">
            <span>+86</span>
            <input v-model="username" 
                   type="number" 
                   placeholder="请输入手机号"
                   onkeypress='return( /[\d]/.test(String.fromCharCode(event.keyCode)))'
                   oninput="if(value.length>11)value=value.slice(0,11)"
                   >
            <div @click="delInputValue">
                <img src="../../assets/images/cha.png" alt="">
            </div>
        </div>
        <div class="next" @click="next">
            下一步
        </div>
  </div>
</template>

<script>
export default {
    data() {
        return {
            username:""
        }
    },
    methods: {
       
        delInputValue(){
            this.username = ""
        },
        next(){
            let myreg=/^[1][3,4,5,7,8][0-9]{9}$/;
            if(this.username.length< 11){
               this.$toast('请输入11位数字的手机号');
            }else{
                if(myreg.test(this.username)){
                   this.$store.commit("saveUserName",this.username)
                   this.$router.push({
                       path:"/password"
                   })
                }else{
                   this.$toast('请输入正确的手机号');
                }
            }
        }
    }
}
</script>

<style lang="scss" scoped>
    @import "~@/assets/css/common.scss";
    .phoneLogin{
        padding: 0 vw(20);
        .head{
            padding: vw(20) 0;
            div{
                display: inline-block;
                width: vw(24);
                height: vw(24);
                font-size: 0;
                overflow: hidden;
                vertical-align: middle;
                img{
                    width: 100%;
                    display: block;
                }
            }
            span{
                font-size: vw(22);
                margin-left: vw(12);
                vertical-align: middle;
            }
        }
        p{
            margin-top: vw(30);
            color: #999999;
            font-size: vw(14);
        }
        .username{
            margin-top: vw(30);
            border-bottom: 1px solid #d9d9d9;
            padding: vw(12) 0;
            position: relative;
            span{
                display: inline-block;
                width: vw(40);
            }
            input{
                border: none;
                margin-left: vw(10);
            }
            div{
                width: vw(20);
                height: vw(20);
                position: absolute;
                top: 50%;
                right: 0;
                transform: translateY(-50%);
                font-size: 0;
                overflow: hidden;
                img{
                    width: 100%;
                    display: block;
                }
            }
        }
        .password{
            margin-top: vw(10);
            border-bottom: 1px solid #d9d9d9;
            padding: vw(12) 0;
            position: relative;
            span{
                display: inline-block;
                width: vw(40);
                font-size: vw(16);
            }
            input{
                border: none;
                margin-left: vw(10);
            }
             div{
                width: vw(20);
                height: vw(20);
                position: absolute;
                top: 50%;
                right: 0;
                transform: translateY(-50%);
                font-size: 0;
                overflow: hidden;
                img{
                    width: 100%;
                    display: block;
                }
            }
        }
        .next{
            width: 100%;
            height: vw(40);
            background-color: #ff3a3a;
            margin-top: vw(40);
            border-radius: vw(20);
            font-weight: bold;
            text-align: center;
            line-height: vw(40);
            color: white;
            font-size: vw(20);
            letter-spacing: vw(3);
        }
    }
</style>